// props:
// name: String              icon 名称
// classPrefix: String       icon 样式前缀（目前无效果）
// size: Number              icon 尺寸，默认大小24px，元素是一个正方形
// color: String             颜色，默认#333333，可以使用16进制和rgba
// background-color: String  颜色，默认#ffffff，可以使用16进制和rgba
// badge-config: Object      角标配置，详细配置参考官方文档 https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-badge-0000001060267851

// 注意:
// 1. 可以使用角标，使用时需将所有的badge属性作为一个对象用badgeConfig名称传入
// 2. 可以绘制图片，在name属性上设置图片路径，路径必须是绝对路径或者云路径，不能使用"./"或者"../"等开头的相对路径，而且图片尺寸需和icon的size值一样，不然可能会导致绘制不完整
// 3. 虽然颜色和背景颜色可以设置透明色，但是不建议设置透明色，透明色可能会导致部分图标绘制的效果与预期相差较大

import {getIconId} from "./js/tool.js";
import {drawIcon} from "./js/draw.js";

export default {
	props: {
	// icon 名称
		name: {
			default: ""
		},
	// icon 样式前缀
		classPrefix: {
			default: "hos-icon"
		},
	// icon 尺寸
		size: {
			default: 24,
		},
	// icon 颜色
		color: {
			default: "#333333"
		},
	// icon 背景颜色
		backgroundColor: {
			default: "#FFFFFF"
		},
	// 角标配置
		badgeConfig: {
			default: {
				config: {
					badgeColor: "#0a59f7",
					textColor: "#FFFFFF",
				},
				placement: "rightTop",
				count: 0,
				maxcount: 99,
				visible: false,
				label: "",
			}
		},
	// icon 图标禁用
		disabled: {
			default: false
		},
	// icon 自定义绑定数据
		dataClick:{
			default: null
		}
	},
	data: {
		id: "",
		ref: "",
		badge: {
			config: {
				badgeColor: "#0a59f7",
				textColor: "#ffffff",
			},
			placement: "rightTop",
			count: 0,
			maxcount: 99,
			visible: false,
			label: "",
		},
		showIcon: false,
	// 防止重复绘制
		isReady: false,
	},
// 初始化自定义组件
	onInit() {
		this.id = getIconId(this.name);
		this.ref = "hos-icon_" + this.id;
		this.$watch('propStr', 'onPropertyChange');
	},

// 自定义组件布局完成
	onLayoutReady() {
		// 如果已经绘制完成不就不需要重复绘制
		if (!this.isReady) {
			this.drawCanvas();
		}
	},
	computed: {
		iconClass() {
			let classes = [];
			let preClass = "";
			let classPrefix = this.classPrefix;
			let name = this.name;

			if (classPrefix && typeof classPrefix == "string") {
				// classes.push(classPrefix);
				preClass = classPrefix + "-";
			}
			if (name && typeof name == "string") {
				preClass = preClass + name
				classes.push(preClass);
			}
			return classes.join(" ");
		},
		propStr() {
			return `${this.name}_${this.classPrefix}_${this.size}_${this.color}_${this.backgroundColor}_${JSON.stringify(this.badgeConfig)}_${this.disabled}`;
		}
	},

// 监听props的变化来重绘icon
	onPropertyChange(newV, oldV) {
		if (newV !== oldV) {
			this.showIcon = false;
			this.drawCanvas();
		}
	},

// 绘制图标
	drawCanvas() {
		this.isReady = false;
		this.showIcon = true;
		if (this.badgeConfig) {
			this.badge = Object.assign(this.badge, this.badgeConfig);
		}
		const canvas = this.$refs["hos-icon"];
		const ctx = canvas.getContext("2d", {
			antialias: true
		});
		let size = parseInt(this.size);
		let zoom = size / 24;
		let color = this.color;
		let backgroundColor = this.backgroundColor;
		if(this.disabled){
			color = "#999999";
			this.$set('badge.config', {
				badgeColor: "#CCCCCC",
				textColor: "#eeeeee"
			});
		}
		if (ctx) {
			// 下一次绘制之前清除画布
			ctx.clearRect(0, 0, size, size);
			// 绘制图标
			drawIcon(ctx, this.name, {
				size: size,
				zoom: zoom,
				color: color,
				backgroundColor: backgroundColor
			});
			this.isReady = true;
		}
	},
	// 图标点击事件
	onclick(){
		if(!this.disabled){
			this.$emit("click", this.dataClick)
		}
	}
}